<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 67 64"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><circle fill="#06F" r="26.868" cy="26.868" cx="26.868"/><path fill="#FCFDFF" d="M36.727 38.567a4.35 4.35 0 1 0 8.7 0 4.35 4.35 0 0 0-8.7 0Z"/><path fill="#002A54" d="M65.138 36.693h-1.794c-.833-10.871-9.522-19.56-20.393-20.393v-1.793a1.707 1.707 0 0 0-3.413 0V16.3c-10.872.833-19.56 9.522-20.393 20.393H17.35a1.707 1.707 0 1 0 0 3.414h1.794c.833 10.871 9.521 19.56 20.393 20.393v1.793a1.707 1.707 0 0 0 3.413 0V60.5c10.871-.833 19.56-9.522 20.393-20.393h1.794a1.706 1.706 0 1 0 0-3.414ZM42.95 57.086V53.76a1.707 1.707 0 0 0-3.413 0v3.326c-8.991-.814-16.166-7.989-16.98-16.98h3.326a1.707 1.707 0 0 0 0-3.413h-3.326c.814-8.99 7.989-16.165 16.98-16.98v3.327a1.706 1.706 0 1 0 3.413 0v-3.326c8.99.816 16.166 7.989 16.98 16.98h-3.327a1.707 1.707 0 0 0 0 3.413h3.327c-.814 8.99-7.99 16.165-16.98 16.98Z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Val1 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
